<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>制作连接数据库的前端页面</title>
</head>
<body>
<div id="app">
    <div align="center">
        <h1 align="center">用户新增加</h1>
        <!--        v-model 的修饰符，一般用于控制数据同步的时机-->
        <!--        2、.trim 自动过滤输入内容最开始  -->
        <!--        和 最后的 空格，中间的会保留一个空格，多的会被过滤掉-->
        名称<input type="text" v-model.trim="add.name"/>
        年龄<input type="text" v-model.number="add.age"/>
        性别<input type="text" v-model.number="add.sex"/>
        <button @click="addUserMe">新加</button>
        <button @click="addUserMe">删除</button>
    </div>

    <hr/>
    <table id="tab2" border="1px" align="center" width="80%">
        <tr>
            <!--     colspan 跨列; 合并列; 合并单元格;-->
            <td colspan="5" align="center"><h1>用户列表</h1></td>
        </tr>
        <tr align="center">
            <!--               设置表格内容-->
            <td>编号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>操作</td>
        </tr>

        <!-- 指定标签循环输出 标签+数据
        在设置为中央对齐 使用循环输出在user类中引用
        使用的是userList内容-->

        <tr align="center" v-for="user in userList">
            <td v-text="user.id">t</td>
            <td v-text="user.sex"></td>
            <td v-text="user.name"></td>
            <td v-text="user.id"></td>

            <td>
                <!-- 添加标签 按钮 循环打印-->
                <button>修改</button>
                <button>删除</button>
            </td>
        </tr>

    </table>

</div>

<script src="../js/vue.js"></script>
<!-- 2.引入Axios.js -->
<script src="../js/axios.js"></script>

<script>
    // 创建实现页面功能
    // 设置axios功能实现请求 添加前缀
    // axios.defaults.baseURL
    // 设置axios功能实现defaults默认值baseURL链接访问网址
    axios.defaults.baseURL = "http://localhost:8088"
    //访问网址后进行vue实现页面功能后端交互
    //     <div id="app">使用的id为app名字
    // el:"#app",
    //     data:{
    // }标定格式写法
    const app = new Vue({
        el: "#app",
        data: {
            // 设置定义集合数据null
            userList: [],
            addUser: {
                name: '',
                age: 0,
                sex: '',
            }
        },
        // 创建 方法
        methods: {
            // 1.定义getuserList 获取后台数据
            //async异步 方法处理
            async getUserList() {
                // getUserList方法进行后台数据调用
                let {data: result} = await axios.get("/vue/getUserList")
                this.userList = result
            },

            async addUserMe() {
                //新增操作 请求类型: post  接收时需要使用json方式处理
                //不需要返回值
                //await axios异步处理获取方式
                await axios.post("/vue/insertUser",this.addUser)
                //将列表页面重新刷新
                this.getUserList()
            }
        },
        mounted(){
            // 增加弹窗输入测试console控制台打印日志
            console.log("vue对象实例化成功!!!!")
            //初始化时调用getUserList()
            this.getUserList()
        }

    })


</script>

</body>
</html>